//1.渲染 课程信息部分内容
var lessonInfo = document.querySelector("#lessonInfo");
lessonInfo.innerHTML = `<p class="title">${lessonData.title}</p>
<ul>
    <li>年级科目：${lessonData.grade}</li>
    <li>课时数量：${lessonData.cases}</li>
    <li>开课时间：${lessonData.start}</li>
    <li>有效期至：${lessonData.deadLine}</li>
    <li>距报名截止仅剩</li>
    <li id="countDown">
        <span></span>天
        <span></span>时
        <span></span>分
        <span></span>秒
    </li>
    <li class="price">
        <span>${lessonData.price}</span>
        <span>免费试学</span>
    </li>
    <li class="sale">
        <span>${lessonData.price}单独购买</span>
        <span>${lessonData.groupPrice}拼团</span>
    </li>
</ul>`

//获取倒计时元素 进行倒计时
var countDown = document.querySelector("#countDown");
var spans = countDown.children;
//倒计时
//1.获取目标时间 和 当前时间的 时间对象
var target = new Date(lessonData.signUp);

//2.设置定时器
function auto() {
    var current = new Date();
    //3.计算时间差
    var cha = target - current;//以毫秒为单位的时间差
    cha = parseInt(cha / 1000);
    //4.格式化时间差
    var d = parseInt(cha / 86400);
    var h = parseInt(cha % 86400 / 3600);
    var min = parseInt(cha % 3600 / 60);
    var s = cha % 60
    var arr = [d, h, min, s];
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerText = arr[i];
    }
}
auto()
setInterval(auto, 1000);

//讲师信息渲染
var teacherInfoDiv = document.querySelector(".introduce");
teacherInfoDiv.innerHTML = `<p>授课师资</p>
<div class="left">
    <p class="img">
        <img src="${coachInfo.avator}" alt="" style="width:62px; height:62px; border-radius:31px">
    </p>
    <p class="right">
        <span>${coachInfo.name}</span>
        <span>${coachInfo.title}</span>
    </p>

</div>
<div class="right">
${coachInfo.express}
</div>`

//课程目录部分渲染
//获取容器元素
var directory = document.querySelector("#directory");
//循环数据 添加章节
lessonArr.forEach(function (item, idx) {
    //动态创建一个detail div  用来作为一个章节的容器
    var detail = document.createElement("div");
    detail.className = "detail";
    //设置当前章节div的内容
    detail.innerHTML += ` <p class="title">${item.name}<i class="iconfont icon-top1"></i></p>`;
    //创建课程ul 并根据数据渲染li
    var ul = document.createElement("ul");
    //向ul中 添加课程li
    var lessonsData = item.courseArr;
    for (var i = 0; i < lessonsData.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = `<p>
        <i class="iconfont icon-bofang"></i>
        <span>${lessonsData[i].name}</span>
    </p>
    <p>
        <span>${lessonsData[i].time}</span>
        <span class="start">播放视频</span>
    </p>`
        ul.appendChild(li);
    }
    detail.appendChild(ul);
    directory.appendChild(detail);
})
//在加好ul之后  我们给前三个章节的课程ul 添加类名active
var uls = directory.querySelectorAll("ul")
for (var i = 0; i < 3; i++) {
    uls[i].className = "active";
}

//实现选项卡效果
var tabs = document.querySelectorAll(".title>span");
var classLists = document.querySelectorAll(".classlist");
console.log(classLists);
//点击按钮 让对应的div 显示 其他div隐藏
for (var i = 0; i < tabs.length; i++) {
    tabs[i].idx = i;
    tabs[i].onclick = function () {
        //让索引和 按钮相同的div显示出来 其他div隐藏
        for (var j = 0; j < classLists.length; j++) {
            classLists[j].className = "classlist";
        }
        classLists[this.idx].className = "classlist active";

        //让当前点击的选项高亮 其他选项不高亮
        for (var k = 0; k < tabs.length; k++) {
            tabs[k].className = "";
        }
        this.className = "active";
    }
}

//点击展开收起
var seeAll = document.querySelector(".seeAll");
//所有课程ul 就是前面 我们获取的uls
seeAll.onclick = function () {
    //点击展开全部后 判断按钮内容 是 展开 还是 收起
    if (this.innerText == '点击展开查看全部') {
        for (var i = 0; i < uls.length; i++) {
            uls[i].className = "active";
        }
        //将按钮内容设置为 收起查看全部
        this.innerText = "收起查看全部";
    } else {
        for (var i = 0; i < uls.length; i++) {
            uls[i].className = "";
        }
        //将按钮内容设置为 点击展开查看全部
        this.innerText = "点击展开查看全部";
    }
}


//登录注册部分
//1.点击免费试学按钮 判断 如果用户没登录 就弹出登录窗口 让用户登录 如果用户登录了 就跳转到 视频播放页 播放视频
//1.1获取免费试学按钮 和 登录部分 及 注册部分 元素
var freeBtn = document.querySelector(".price>span:nth-child(2)");
var loginPart = document.querySelector("#login");
var registerPart = document.querySelector("#register");
var closeLogin = document.querySelector(".loginPart>span");
var links = document.querySelectorAll('.navLogin>a');
//1.2在缓存中 存入一个数据 记录当前用户的登录状态
// localStorage.setItem("login", "未登录");
//1.3添加点击事件
freeBtn.onclick = function () {
    //1.4判断 如果缓存中的状态为未登录 证明用户没登录 就xxx  否则就 yyyy
    var flag = localStorage.getItem("login");
    if (flag!="登录") {
        //证明用户没登录 就弹出登录窗口 让用户登录
        loginPart.style.display = "block";
    } else {
        alert("您已登陆")
    }
}
//点击叉号 关闭登录部分
closeLogin.onclick = function () {
    loginPart.style.display = "none";
}

//点击导航条部分的登录按钮 让登录模块 显示
links[0].onclick = function () {
    //登录
    loginPart.style.display = "block";
}
links[1].onclick = function () {
    //注册
    registerPart.style.display = "block";
}

//点击登录窗口中 去注册按钮 显示注册窗口
var goRegister = document.querySelector("#goRegister");//获取登录窗口中 去注册按钮
goRegister.onclick = function () {
    registerPart.style.display = "block";
    loginPart.style.display = "none";
}

//点击注册部分的叉号 关闭注册窗口
var registerClose = document.querySelector(".registerPart>span");
registerClose.onclick = function () {
    registerPart.style.display = "none";
}

//注册
/* 
- 注册
  - 1.获取用户输入的注册信息 
  - 2.检测用户输入的信息 是否 符合标准
  - 3.将数据  和  缓存中已经存在的注册用户信息 进行比对  
  - 4.如果发现用户名重复 提示用户  注册失败 用户名重复
  - 5.如果用户名不重复 就提示用户  注册成功  并跳转到 登录窗口
- 
*/
//用户输入信息 并点击注册按钮
var regBtn = document.querySelector(".registerPart .loginbtn");
var form = document.querySelector("#form");
//2.验证用户输入的信息 是否符合标准
var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
//密码 要求 字母和数字的组合 6-11位
var pwdReg = /(?!^[0-9]{6,11}$|^[a-zA-Z]{6,11}$)^[0-9a-zA-Z]{6,11}$/;
//2.验证一下 用户输入的信息 是否符合标准
form.tel.onblur = function () {
    var em = getNext(this);
    //验证 用户输入的内容
    if (phoneReg.test(this.value)) {
        em.innerText = "验证成功"
    } else {
        em.innerText = "验证失败"
    }
}
form.pass.onblur = function () {
    var em = getNext(this);
    //验证 用户输入的内容
    if (pwdReg.test(this.value)) {
        em.innerText = "验证成功"
    } else {
        em.innerText = "验证失败"
    }
}
form.pass2.onblur = function () {
    var em = getNext(this);
    //验证 用户输入的内容
    if (this.value === form.pass.value) {
        em.innerText = "验证成功"
    } else {
        em.innerText = "验证失败"
    }
}
form.yanzhen.onblur = function () {
    span = document.querySelector(".yanzhenma");
    var em = getNext(span);
    //验证 用户输入的内容
    if (this.value === span.innerText) {
        em.innerText = "验证成功"
    } else {
        em.innerText = "验证失败"
    }
}
//点击注册按钮 进行注册操作
regBtn.onclick = function () {
    //1.获取手机号 和 密码
    var phoneNum = form.tel.value;
    var pwd = form.pass.value;
    //2.将数据  和  缓存中已经存在的注册用户信息 进行比对
    //2.1获取缓存中的数据  假设 缓存的用户数据 键名为 userData
    var userData;
    var data = JSON.parse(localStorage.getItem("userData"));
    //2.2判断 如果缓存中 有userData数据 我们就获取到userData数据 并将本次注册用户的数据 存入userData中
    //如果缓存中 没有userData数据 我们就自己创建一个userData数据 存入缓存中
    if (data == null) {
        //证明之前没有注册用户
        userData = [];
        //创建用户信息对象
    } else {
        //证明之前有注册用户
        userData = data;//将userData 赋值为缓存中 获取出来的数据
        //创建用户信息对象
    }
    //设置当前用户信息对象
    var obj = {
        phone: phoneNum,
        pwd: pwd
    }
    //检测 当前用户的手机号 是否重复
    var repeat = "不重复";//声明一个变量 记录重复状态
    //循环之前的注册用户信息
    for (var i = 0; i < userData.length; i++) {
        if (userData[i].phone == phoneNum) {
            repeat = "重复"
        }
    }
    if (repeat == "重复") {
        alert("手机号已注册")
    } else {
        // 将用户信息对象 存入 注册用户数据中
        userData.push(obj);
        alert("注册成功");
        //显示登录部分
        registerPart.style.display = "none";
        loginPart.style.display = "block";
    }



    //将userData用户信息 重新存入缓存中即可
    localStorage.setItem("userData", JSON.stringify(userData));

}
form.onsubmit = function () {
    return false;//阻止默认行为 防止提交表单 刷新页面
}


//登录部分逻辑
/* 
登录

- 1.获取用户输入的登录信息
- 
- 3.将数据 和 缓存中已存在的注册用户信息  进行比对 
- 4.如果比对成功 就 提示用户 登录成功 并隐藏 登录窗口
- 5.如果比对失败 就 提示用户 用户名或密码有误 请重新登录  继续保留登录窗口
*/
//点击登录按钮 执行上述任务
var loginBtn = document.querySelector(".loginPart .loginbtn");//登录按钮
var inps = document.querySelectorAll(".loginPart input");//登录部分的输入框
var img = document.querySelector("#img");
var video = document.querySelector("#video");
//封装一个登录完成后 要执行的代码函数
function loginFn() {
    alert("登录成功");
    //修改缓存中的登录状态
    localStorage.setItem("login", "登录")
    loginPart.style.display = "none";
    //3.将页面上 课程图片 切换为 课程视频 将 课程信息 切换为课程目录
    //3.1将页面上 课程图片 切换为 课程视频
    img.style.display = "none";
    video.style.display = "block";
    //3.2课程信息 切换为课程目录
    //3.2.1清空lessonInfo的内容
    lessonInfo.innerHTML = "";
    //3.2.2根据数据  重新渲染 lessonInfo的内容
    lessonInfo.innerHTML = `<p class="top">
        <span class="active">目录</span><span>讨论</span>
    </p>
    <!-- 课程目录 -->
    <div class="content active">
        
    </div>
    <!-- 评论 -->
    <div class="content">
        <textarea name="" cols="30" rows="10" maxlength="100" class="txt"></textarea>
        <button class="push">发布</button>
        <div class="scroll">
            <ul class="comment">
            <li>
            <p>
                <img src="../img/login/wx.png" alt="">
                <span>哈哈哈哈哈</span>
                <span>21:12</span>
            </p>
            <p>这是一个无营养的评价</p>
            </li>
            </ul>
        </div>
    </div>`
    //获取到 课程目录容器
    var directoryCon = lessonInfo.querySelector(".content");
    //循环章节数据 渲染章节
    directoryArr.forEach(function (item, idx) {
        // 创建章节div
        var list = document.createElement("div");
        list.className = "list";
        list.innerHTML = `<p class="title">${item.name}</p>`;
        //创建课程ul
        var ul = document.createElement("ul");
        ul.className = "list"
        item.courses.forEach(function (item1, idx1) {
            //创建课程li
            var li = document.createElement("li");
            li.innerHTML = `  <span>${item1.name}</span>
            <i class="iconfont icon-bofang"></i>`;
            //给课程li添加一个自定义属性 来记录当前课程li 对应的视频地址
            li.src = item1.src;
            //将课程li 追加到 课程ul中
            ul.appendChild(li);
        });
        //将课程ul 追加到 章节div的最后面
        list.appendChild(ul);
        //将章节div 追加到 目录容器中
        directoryCon.appendChild(list);
    })

    //4.选项卡切换 目录 和 评论
    var contents = lessonInfo.querySelectorAll(".content");
    var tabSpans = document.querySelectorAll(".top>span");
    for (var i = 0; i < tabSpans.length; i++) {
        tabSpans[i].idx = i;
        tabSpans[i].onclick = function () {
            //1.让所有content都隐藏 索引和 当前选项相同的content显示
            for (var j = 0; j < contents.length; j++) {
                contents[j].className = "content";
            }
            contents[this.idx].className = "content active";
            //2.所有选项都不高亮 唯独当前选项高亮
            for (var k = 0; k < tabSpans.length; k++) {
                tabSpans[k].className = '';
            }
            this.className = "active";
        };
    }
    //5.操作评论部分
    //5.1点击按钮
    var pushBtn = lessonInfo.querySelector(".push");
    var commentUl = lessonInfo.querySelector(".comment");
    var txt = lessonInfo.querySelector(".txt");
    pushBtn.onclick = function () {
        var date = new Date();
        //5.2获取用户输入的评论内容
        var comment = txt.value;
        //5.3将评论内容发布
        //5.3.1创建一个li
        var li = document.createElement("li");
        //5.3.2设置评论li的内容
        li.innerHTML = `<p>
        <img src="../img/login/wx.png" alt="">
        <span>哈哈哈哈</span>
        <span>${date.getHours()}:${date.getMinutes()}</span>
    </p>
    <p>${comment}</p>`
        //5.3.3 将设置好内容的评论li 追加到ul中
        commentUl.appendChild(li);
    }
    //6.点击不同的课程  切换对应的课程视频
    //6.1获取课程li
    var lessonLis = lessonInfo.querySelectorAll(".list>li");
    console.log(lessonLis);
    //6.2给所有课程li 添加点击事件
    for (var i = 0; i < lessonLis.length; i++) {
        lessonLis[i].onclick = function () {
            //6.3获取用户点击的li的src属性值
            var src = this.src;
            //6.4将src 设置为 视频标签的src值
            video.src = src;
        }
    }
    //7.让导航部分的登录注册按钮隐藏 显示 用户头像
    var navLogin = document.querySelector(".navLogin")
    var user = document.querySelector(".user");
    navLogin.style.display = "none";
    user.style.display = "inline-block";
}
loginBtn.onclick = function () {
    //1.获取用户输入的登录信息
    var phone = inps[0].value;
    var pwd = inps[1].value;
    //2.将数据 和 缓存中已存在的注册用户信息  进行比对 
    //2.1获取缓存数据
    var userData = JSON.parse(localStorage.getItem("userData"));
    //2.2循环缓存数据中 所有注册用户的信息 挨个进行比对
    var flag = "失败";//声明一个状态变量 记录比对结果 假设比对失败
    for (var i = 0; i < userData.length; i++) {
        if (phone == userData[i].phone && pwd == userData[i].pwd) {
            flag = "成功"
        }
    }
    //2.3判断 如果状态为成功 就登录成功  否则 登录失败
    if(flag=="成功"){
        loginFn();
        // location.reload();
    } else {
        alert("登录失败")
    }
}

//保持登录状态
window.onload = function(){
    //页面加载的时候 我们就可以判断 登录状态
    //如果登录状态 为 登录 就应该 执行loginFn 渲染页面
    //如果状态是 未登录  就不应该执行 loginFn
    //1.获取登录状态
    var login = localStorage.getItem("login");
    console.log(login);
    if(login=="登录"){
        loginFn();
    }
}

//获取退出登录按钮  添加点击事件
var out = document.querySelector(".out");
out.onclick = function(){
    //修改登录状态
    localStorage.setItem("login","未登录");
    //刷新页面
    location.reload();
}


